<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>设备管理</title>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="/plugins/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <script src="/js/jquery-3.6.1.min.js"></script>
</head>
<body>

<!--<div class="container-fluid"  style="margin-left: 30px;margin-top: 20px;" >-->

<!--    &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--    <button type="button" class="btn btn-primary" onclick="addmodel();">新增教师</button>-->

<!--    <button type="button" class="btn btn-warning" onclick="editStudent();">修改教师信息</button>-->

<!--    <button type="button" class="btn btn-danger" onclick="deleteStudent();">删除教师</button>-->

<!--    <div style="float: right;margin-right: 30px;">-->
<!--        <form class="form-inline">-->
<!--            <div class="form-group">-->
<!--                <label class="sr-only" for="opt">属性</label>-->
<!--                <select class="form-control" id="opt" name="opt">-->
<!--                    <option value="1">按照姓名查询</option>-->
<!--                    <option value="2">按照工号查询</option>-->
<!--                    <option value="3">按照性别查询</option>-->
<!--                    <option value="4">按照年龄查询</option>-->
<!--                </select>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label class="sr-only" for="searchData">查询</label>-->
<!--                <input type="text" class="form-control" id="searchData" name="searchData" placeholder="请输入需要查询的内容">-->
<!--            </div>-->

<!--            <button type="button" class="btn btn-primary" onclick="search();">查询</button>-->
<!--            <button type="button" class="btn btn-primary" onclick="resetStuTable();">复位</button>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->
<div class="container-fluid" style="margin-top: 20px;">
    <table class="table table-hover" id="camTable">

    </table>
</div>





<script src="/js/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/plugins/moment/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">

    function loadTable() {
        // //创建一个webSocket实例，执行后，客户端就会与服务端连接
        // var ws = new WebSocket("ws://localhost:9988");
        //
        // $(function () {
        //     $(".c-btn").click(function () {
        //         //向服务端发送控制命令
        //         var type = $(this).data("type");
        //         ws.send(type)
        //     });
        // })
        //
        // //当WebSocket创建成功时，触发onopen事件
        // ws.onopen = function(){
        //     // 复杂的数据结构，在通过连接发送之前，必须进行序列化。
        //     const json = JSON.stringify({
        //         type: 'clent connected',
        //     });
        //     ws.send(json); //将消息发送到服务端
        // }
        // var camInfo;
        // //var str_jsonData
        // // //当客户端收到服务端发来的消息时，触发onmessage事件
        // ws.onmessage = function(e){
        //     console.log(e.data);
        //     camInfo=JSON.parse(e.data);
        //     //str_jsonData = JSON.stringify(e.data);
        //     //localStorage.setItem('localData', str_jsonData);
        // }
        //
        // var tableColumns =[{
        //     checkbox: true
        // }, {
        //     field: 'ip',
        //     title: 'ip地址',
        //     sortable:true
        // }, {
        //     field: 'port',
        //     title: '端口',
        //     sortable:true
        // }, {
        //     field: 'manufacturer',
        //     title: '品牌名',
        //         sortable:true
        // },{
        //     field: 'model',
        //     title: '型号',
        //         sortable:true
        // }, {
        //     field: 'firmwareVersion',
        //     title: '固件',
        //         sortable:true
        // },{
        //     field: 'serialNumber',
        //     title: '序列号',
        //         sortable:true
        // },{
        //     field: 'hardwareId',
        //     title: '硬件',
        //         sortable:true
        // },];
        // var data = [{"ip":"192.168.36.252","port":80,"manufacturer":"Dahua","model":"DH-1H1200-DW(B)","firmwareVersion":"2.810.0000036.0.R 2023-05-30","serialNumber":"9J0CAE3PAJ00163","hardwareId":1}];
        // $('#camTable').bootstrapTable({
        //     columns: tableColumns,
        //     data: data,
        // })


        $('#camTable').bootstrapTable({
            url: '/webapi/getbypage',
            striped: true,
            pagination: true,
            singleSelect: false,
            clickToSelect: true,
            pageSize: 7,//每页数据条数
            pageNumber: 1,//首页页码
            sidePagination: "server",
            classes: "table table-bordered table-striped table-hover",
            queryParams: function (params) {
                let paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "id",
                    direct: "asc"
                }
                return paraObj;
            },
            columns: [{
                checkbox: true
            },  {
                field: 'ip',
                title: 'ip地址',
                sortable:true
            }, {
                field: 'port',
                title: '端口',
                sortable:true
            }, {
                field: 'manufacturer',
                title: '品牌名',
                sortable:true
            },{
                field: 'model',
                title: '型号',
                sortable:true
            }, {
                field: 'firmwareVersion',
                title: '固件',
                sortable:true
            },{
                field: 'serialNumber',
                title: '序列号',
                sortable:true
            },{
                field: 'hardwareId',
                title: '硬件',
                sortable:true
            },]
        })
    }//end of loadTable();



    $(function (){
        loadTable();
    })

</script>
</body>
</html>